<template>
	<div class="content-box" v-loading="loading">
		<div class="el-form-sub-title flex-center mt-15">
			年份酒价值<el-switch
				class="ml10"
				v-model="data[0].using"
				size="large"
				v-auth="'content:topic:switch:invoke'"
				@change="changeStatus('0')"
				inline-prompt
				active-text="启用"
				inactive-text="禁用"
			></el-switch>
		</div>
		<el-table class="form-table" :data="data[0].contents">
			<el-table-column label="价值标题" prop="contentTitle" align="center"> </el-table-column>
			<el-table-column label="图片" prop="contentImage" align="center">
				<template #default="scope">
					<div v-if="scope.row.contentImage" style="width: 80px; height: 80px; margin: auto">
						<el-image :src="scope.row.contentImage"></el-image>
					</div>
				</template>
			</el-table-column>
			<el-table-column label="排序" prop="order" align="center"> </el-table-column>
			<el-table-column label="关联内容" min-width="300" prop="contentName" align="center"> </el-table-column>
			<el-table-column label="操作" width="120" align="center">
				<template #default="scope">
					<el-button type="primary" link v-auth="'content:topic:edit:invoke'" @click="onUpdate('0', scope.row)"> 编辑 </el-button>
				</template>
			</el-table-column>
		</el-table>
		<div class="el-form-sub-title flex-center mt10">
			数字酒藏认知<el-switch
				class="ml10"
				v-model="data[1].using"
				size="large"
				v-auth="'content:topic:switch:invoke'"
				@change="changeStatus('1')"
				inline-prompt
				active-text="启用"
				inactive-text="禁用"
			></el-switch>
		</div>
		<el-table class="form-table" :data="data[1].contents">
			<el-table-column label="酒藏标题" prop="contentTitle" align="center"> </el-table-column>
			<el-table-column label="简介" prop="contentExtend" align="center"> </el-table-column>
			<el-table-column label="关联内容" min-width="300" prop="contentName" align="center"> </el-table-column>
			<el-table-column label="操作" width="120" align="center">
				<template #default="scope">
					<el-button type="primary" link v-auth="'content:topic:edit:invoke'" @click="onUpdate('1', scope.row)"> 编辑 </el-button>
				</template>
			</el-table-column>
		</el-table>
		<div class="el-form-sub-title flex-center mt10">
			数字酒藏权益<el-switch
				class="ml10"
				v-model="data[2].using"
				size="large"
				v-auth="'content:topic:switch:invoke'"
				@change="changeStatus('2')"
				inline-prompt
				active-text="启用"
				inactive-text="禁用"
			></el-switch>
		</div>
		<el-table class="form-table" :data="data[2].contents">
			<el-table-column label="权益标题" prop="contentTitle" align="center"> </el-table-column>
			<el-table-column label="图片" prop="contentImage" align="center">
				<template #default="scope">
					<div v-if="scope.row.contentImage" style="width: 80px; height: 80px; margin: auto">
						<el-image :src="scope.row.contentImage"></el-image>
					</div>
				</template>
			</el-table-column>
			<el-table-column label="排序" prop="order" align="center"> </el-table-column>
			<el-table-column label="权益副标题" min-width="300" prop="contentExtend" align="center"> </el-table-column>
			<el-table-column label="操作" width="120" align="center">
				<template #default="scope">
					<el-button type="primary" link v-auth="'content:topic:edit:invoke'" @click="onUpdate('2', scope.row)"> 编辑 </el-button>
				</template>
			</el-table-column>
		</el-table>
		<div class="el-form-sub-title flex-center mt10">
			消费场景<el-switch
				class="ml10"
				v-model="data[3].using"
				size="large"
				v-auth="'content:topic:switch:invoke'"
				@change="changeStatus('3')"
				inline-prompt
				active-text="启用"
				inactive-text="禁用"
			></el-switch>
			<el-button class="ml10" link type="primary" v-auth="'content:topic:create:invoke'" @click="onUpdate('3')"> + 新增消费场景</el-button>
		</div>
		<el-table class="form-table" :data="data[3].contents">
			<el-table-column label="场景标题" prop="contentTitle" align="center"> </el-table-column>
			<el-table-column label="图片" prop="contentImage" align="center">
				<template #default="scope">
					<div v-if="scope.row.contentImage" style="width: 80px; height: 80px; margin: auto">
						<el-image :src="scope.row.contentImage"></el-image>
					</div>
				</template>
			</el-table-column>
			<el-table-column label="排序" prop="order" align="center"> </el-table-column>
			<el-table-column label="关联内容" min-width="300" prop="contentName" align="center"> </el-table-column>
			<el-table-column label="操作" width="120" align="center">
				<template #default="scope">
					<el-button type="primary" link v-auth="'content:topic:edit:invoke'" @click="onUpdate('3', scope.row)"> 编辑 </el-button>
					<el-divider direction="vertical" />
					<el-button type="primary" link v-auth="'content:topic:delete:invoke'" @click="onDelete(scope.row)"> 删除 </el-button>
				</template>
			</el-table-column>
		</el-table>
		<div class="el-form-sub-title flex-center mt10">
			储运保障<el-switch
				class="ml10"
				v-model="data[4].using"
				size="large"
				v-auth="'content:topic:bottle-env:invoke'"
				@change="changeStatus('4')"
				inline-prompt
				active-text="启用"
				inactive-text="禁用"
			></el-switch>
		</div>
		<el-table class="form-table" :data="data[4].contents">
			<el-table-column label="标题" prop="contentTitle" align="center"> </el-table-column>
			<el-table-column label="图片" prop="contentImage" align="center">
				<template #default="scope">
					<div v-if="scope.row.contentImage" style="width: 80px; height: 80px; margin: auto">
						<el-image :src="scope.row.contentImage"></el-image>
					</div>
				</template>
			</el-table-column>
			<el-table-column label="排序" prop="order" align="center"> </el-table-column>
			<el-table-column label="关联内容" min-width="300" prop="contentName" align="center"> </el-table-column>
			<el-table-column label="操作" width="120" align="center">
				<template #default="scope">
					<el-button type="primary" link v-auth="'content:topic:edit:invoke'" @click="onUpdate('4', scope.row)"> 编辑 </el-button>
				</template>
			</el-table-column>
		</el-table>
		<Update :visible="updateVisible" :row="updateRow" @handleClose="closeImport"></Update>
	</div>
</template>

<script setup lang="tsx" name="contentSubject">
import { onMounted, ref } from 'vue';
import dayjs from 'dayjs';
import { fetchSubjectList, fetchDelSubject, fetchSwitchSubject } from '/@/api/content';
import Update from './dialog/update.vue';
import { ElMessage, ElMessageBox } from 'element-plus';

const data = ref<any>({
	0: {},
	1: {},
	2: {},
	3: {},
	4: {},
});
const loading = ref(false);
const updateVisible = ref(false);
const updateRow = ref();

const changeStatus = (type: string) => {
	fetchSwitchSubject({ contentCode: type }).then((res) => {
		if (res.code == 200) {
			ElMessage.success('状态更改成功');
			initData();
		}
	});
};

const onUpdate = (updateType: any, row?: any) => {
	if (row) {
		updateRow.value = {
			updateType,
			...row,
			contentImage: row.contentImage ? [{ url: row.contentImage }] : [],
		};
	} else {
		updateRow.value = { updateType };
	}
	updateVisible.value = true;
};

const closeImport = (success: boolean) => {
	if (success) {
		initData();
	}
	updateVisible.value = false;
	updateRow.value = null;
};

const onDelete = async (row: any) => {
	ElMessageBox.confirm('确认删除该消费场景?', '提示', {
		confirmButtonText: '确定',
		cancelButtonText: '取消',
		type: 'warning',
	}).then(async () => {
		const res = await fetchDelSubject({ id: row.id });
		if (res.code == 200) {
			initData();
			ElMessage.success('删除成功');
		}
	});
};

const initData = async () => {
	loading.value = true;
	const res = await fetchSubjectList();
	if (res.code == 200) {
		data.value = res.data;
	}
	loading.value = false;
};

onMounted(() => {
	initData();
});
</script>

<style scoped lang="scss">
.form-table {
	margin-top: 20px;
}
</style>
